﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Margin</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.2.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

    <link href="margin.css" rel="stylesheet" />
    <script src="margin.js"></script>
</head>
<body>
    <div class="margin fragment">
        <header aria-label="Header content" role="banner">
            <button data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to margin</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="explanation">All of these div's have the same style rule applied to them and it includes 5 pixels of margin. That means that there is going to be 10 pixels between them. Margin is space outside the border and keeps an element from running into other elements. It's very important for implementing Windows 8 design.</div>
            <div class="flex"></div>
        </section>
    </div>
</body>
</html>
